<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>枫叶商城——Maple Leaf Store</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="shortcut icon" href="./images/logo.ico" />
    <link rel="stylesheet" href="./plugin/bootstrap/css/bootstrap.min.css" />
    <script src="./plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="./plugin/jQuery/jquery-3.6.0.js"></script>
    <script src="./js/index.js"></script>
    <script src="./plugin/vue.min.js"></script>
    <script src="./plugin/axios.min.js"></script>
    <link
      rel="stylesheet"
      href="./plugin/element-ui/lib/theme-chalk/index.css"
    />
    <script src="./plugin/element-ui/lib/index.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 顶栏 -->
      <header>
        <div id="header" class="row w justify-content-around">
          <!-- logo图 -->
          <div class="header_logo col-1">
            <img src="./images/logo_maple2.png" alt="..." />
            <div class="header_logo_text">Maple Leaf</div>
          </div>
          <!-- 搜索框 -->
          <div class="header_search col-7">
            <input type="text" id="searchName" />
            <button @click="initData()">搜索</button>
          </div>
          <!-- 购物车 -->
          <div class="col-2 header_shoppingCart">
            <a href="./files/shoppingCart.html">
              <img src="./images/购物车_shopping.png" alt="" />
              我的购物车
            </a>
          </div>
          <div class="col-2 header_shoppingCart">
            <a href="./files/order.html">
              <img src="./images/_订单.png" alt="" />
              我的订单
            </a>
          </div>
        </div>
      </header>

      <!-- 导航栏 -->
      <nav class="classify">
        <div class="row w m-0 mx-auto">
          <ul class="nav">
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">全部</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">数码</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">家居</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">服饰</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">食品</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">医疗</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">钟表</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">珠宝</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">护肤</a>
            </li>
            <li class="nav-item" @click="init()">
              <a class="nav-link" href="#">户外</a>
            </li>
          </ul>
        </div>
      </nav>

      <!-- 主体部分 -->
      <main>
        <!-- 主体内容 -->
        <div class="main mx-auto w">
          <div class="row">
            <!-- 轮播图 -->
            <div class="col-8 carousel">
              <div
                id="carouselExampleIndicators"
                class="carousel slide"
                data-bs-ride="true"
              >
                <div class="carousel-indicators">
                  <button
                    type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide-to="0"
                    class="active"
                    aria-current="true"
                    aria-label="Slide 1"
                  ></button>
                  <button
                    type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide-to="1"
                    aria-label="Slide 2"
                  ></button>
                  <button
                    type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide-to="2"
                    aria-label="Slide 3"
                  ></button>
                  <button
                    type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide-to="3"
                    aria-label="Slide 4"
                  ></button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img
                      src="./images/carsoul1.png"
                      class="d-block w-100"
                      alt="..."
                    />
                  </div>
                  <div class="carousel-item">
                    <img
                      src="./images/carsoul2.png"
                      class="d-block w-100"
                      alt="..."
                    />
                  </div>
                  <div class="carousel-item">
                    <img
                      src="./images/carsoul3.jpg"
                      class="d-block w-100"
                      alt="..."
                    />
                  </div>
                  <div class="carousel-item">
                    <img
                      src="./images/carsoul4.jpg"
                      class="d-block w-100"
                      alt="..."
                    />
                  </div>
                </div>
                <button
                  class="carousel-control-prev"
                  type="button"
                  data-bs-target="#carouselExampleIndicators"
                  data-bs-slide="prev"
                >
                  <span
                    class="carousel-control-prev-icon"
                    aria-hidden="true"
                  ></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button
                  class="carousel-control-next"
                  type="button"
                  data-bs-target="#carouselExampleIndicators"
                  data-bs-slide="next"
                >
                  <span
                    class="carousel-control-next-icon"
                    aria-hidden="true"
                  ></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
            </div>
            <!-- 个人、登录注册、四个功能键 -->
            <div class="col-4 user">
              <div class="user-content">
                <img src="./images/user.png" class="img-fluid" alt="" />
                <h5 class="mt-3">欢迎光临 — 枫叶商城</h5>
                <p>Welcome to Maple Leaf Store!</p>
                <button
                  class="btn_login"
                  onclick="javascript:window.location.href='./files/login.html';"
                >
                  登录
                </button>
                <button
                  class="btn_register"
                  onclick="javascript:window.location.href='./files/register.html';"
                >
                  注册
                </button>
              </div>
              <div class="user-icon">
                <div>
                  <img src="./images/商品.png" /><br /><a
                    href="./files/shoppingCart.html"
                    >我的商品</a
                  >
                </div>
                <div>
                  <img src="./images/地址.png" /><br /><a
                    href="./files/address.html"
                    >收货地址</a
                  >
                </div>
                <div>
                  <img src="./images/个人信息.png" /><br /><a
                    href="./files/personal.html"
                    >个人信息</a
                  >
                </div>
                <div>
                  <img src="./images/退出登录.png" /><br /><span id="exit"
                    >退出登录</span
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- 猜你喜欢标题 -->
          <div class="yourLike pb-0" id="yourLike">
            <h3 class="m-0">猜你喜欢</h3>
          </div>
          <!-- 猜你喜欢商品 -->
          <div class="likeShow">
            <div class="row">
              <!-- 以下为商品展示的代码 -->
              <div class="col-4 p-0" v-for="(i,index) in size" :key="index">
                <div
                  class="card m-2"
                  style="background-color: rgb(240, 240, 240)"
                >
                  <div class="row g-0">
                    <div class="col-md-5 align-self-center">
                      <img
                        :src="goods.image[i-1]"
                        class="img-fluid rounded-start"
                        alt="..."
                      />
                    </div>
                    <div class="col-md-7">
                      <div class="card-body">
                        <p class="card-title" v-text="goods.name[i-1]"></p>
                        <div
                          class="business"
                          v-text="goods.seller_name[i-1]"
                        ></div>
                        <div class="price-wrapper">
                          ￥<span
                            class="price"
                            v-text="goods.price[i-1]"
                          ></span>
                          <span class="goodsNum">{{ goodnum[i-1] }}</span>
                          <img
                            class="shoppingCart"
                            src="./images/购物车_shopping.png"
                            alt=""
                            :key="index"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页条 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="pageGoods"
              :page-size="goods.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 页面跳转功能键 -->
        <div class="toolkit-list">
          <div class="toolkit-item">
            <a href="#yourLike">
              <img src="./images/喜欢_like.png" alt="" />
              猜你喜欢
            </a>
          </div>
          <div class="toolkit-item" id="backToTop" onclick="backToTop()">
            <img src="./images/去顶部_to-top.png" alt="" />
            回顶部
          </div>
        </div>
      </main>

      <!-- 底栏 -->
      <footer class="text-center">
        <div class="row dkhs w mx-auto">
          <div class="col-3">
            <span class="item1"></span> 品类齐全，轻松购物
          </div>
          <div class="col-3">
            <span class="item2"></span> 多仓直发，极速配送
          </div>
          <div class="col-3">
            <span class="item3"></span> 正品行货，精致服务
          </div>
          <div class="col-3">
            <span class="item4"></span> 天天低价，畅选无忧
          </div>
        </div>
        <hr />
        <p>
          Copyright © 2022 深圳技师学院枫叶小组（Maple Leaf Group） 版权所有
        </p>
        <p>项目研发小组所在地址：深圳市龙岗区龙城街道将军帽路深圳技师学院</p>
      </footer>
    </div>
  </body>
</html>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        addGoods: [],
        addGoods2: [],
        header_cid: [
          "1537240024447647745",
          "1537240076083724289",
          "1537240276059750401",
          "1537240354530983938",
          "1537240431261581314",
          "1537240513595768833",
          "1537240547024371713",
          "1537240579073048577",
          "1537240608479313921",
        ],
        goods: {
          id: [],
          name: [],
          sid: [],
          cid: [],
          price: [],
          image: [],
          seller_name: [],
          shopping_cart: "./images/购物车_shopping.png",
          imgName: [],
        },
        size: 12,
        currentPage: 1,
        current: 1,
        total: 228,
        pageGoods: [12, 24, 36, 48, 60, 72, 84, 96, 108],
        cid: "",
        sid: "1538364171261296641",
        goodnum: [],
      };
    },
    methods: {
      init() {
        this.initData();
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.size = val;
        this.init();
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.current = val;
        this.initData();
        $(".shoppingCart").prop("src", "./images/购物车_shopping.png");
      },
      delData() {
        for (let v of Object.values(this.goods)) {
          v.length = 0;
        }
      },
      toAddGoods(i) {
        if (sessionStorage.getItem("user_id")) {
          $(".shoppingCart")
            .eq(i)
            .prop("src", "./images/添加购物车_shopping-cart-add.png");

          let good = {
            name: this.goods.name[i],
            image: this.goods.imgName[i],
            uid: sessionStorage.getItem("user_id"),
            gid: this.goods.cid[i],
            amount: this.goods.price[i],
          };

          this.addGoods.push(good);
          //   if (!localStorage.getItem("addGoods")) {
          for (var a = 0; a < this.addGoods.length; a++) {
            this.addGoods2.push(this.addGoods[a]);
            sessionStorage.setItem("addGoods2", JSON.stringify(this.addGoods2));
          }
          //   }

          localStorage.setItem("addGoods", JSON.stringify(this.addGoods));

          if (!localStorage.getItem("addGoods")) {
            this.addGoods = [];
          }
        } else {
          alert("请先登录账号后，再进行商品的添加！");
        }
        axios({
          method: "POST",
          url: "http://localhost:8080/shopping/add",
          data: {
            name: this.goods.name[i],
            image: this.goods.imgName[i],
            uid: sessionStorage.getItem("user_id"),
            gid: i + 1,
            amount: this.goods.price[i],
          },
        }).then(function (res) {
          // this.init();
          //   console.log(res);
          console.log(i);
          // console.log(vm.goods.name[i]);
          // console.log(vm.goods.imgName[i]);
        });
        // vm.init();
      },
      initData() {
        const vm = this;
        // setInterval();
        axios({
          method: "GET",
          url: "http://localhost:8080/goods/list",
          params: {
            current: vm.current,
            size: vm.size,
            name: $("#searchName").val(),
            typeId: vm.cid,
          },
        }).then(function (res) {
          //   console.log(res.data);
          //   console.log(res.data.data.records);
          vm.delData();
          for (var i = 0; i < res.data.data.records.length; i++) {
            vm.goods.id.push(res.data.data.records[i].id);
            vm.goods.name.push(res.data.data.records[i].name);
            vm.goods.sid.push(res.data.data.records[i].sid);
            vm.goods.cid.push(res.data.data.records[i].cid);
            vm.goods.price.push(res.data.data.records[i].price);
            vm.goods.image.push(
              "http://localhost:8080/MapleLeafStore/upload/" +
                res.data.data.records[i].image
            );
            vm.goods.seller_name.push(res.data.data.records[i].seller_name);
            vm.goods.imgName.push(res.data.data.records[i].image);
            vm.goodnum.push(Number(res.data.data.records[i].number));
            // vm.goodnum.length = 12;
            // vm.goods.goodnum[i] = 0;
          }
          res.data.data.current = vm.current;
          vm.size = res.data.data.records.length;
          vm.total = res.data.data.total;
          //   商品分类
          for (let i = 1; i < 10; i++) {
            $(".nav-item")
              .eq(i)
              .click(function () {
                vm.cid = vm.header_cid[i - 1];
                vm.init();
                $(".shoppingCart").prop("src", "./images/购物车_shopping.png");
              });
          }
          //   展示全部商品
          $(".nav-item")
            .eq(0)
            .click(function () {
              vm.cid = "";
              vm.init();
              $(".shoppingCart").prop("src", "./images/购物车_shopping.png");
            });
          // 添加购物车+显示小数字
          for (let i = 0; i < vm.size; i++) {
            // console.log(vm.toAddGoods);
            $(".shoppingCart").eq(i).click(vm.toAddGoods.bind(vm, i));
            $(".shoppingCart")
              .eq(i)
              .click(function () {
                // vm.goodnum = [];
                vm.goodnum[i] += 1;
                // vm.goods.goodnum = [];
                // vm.goods.goodnum.push(res.data.data.records[i].number);
                vm.init();
                for (let v of Object.values(this.goodnum)) {
                  v.length = 0;
                }
                // vm.goodnum = [];
                console.log(vm.goodnum);
                console.log(vm.goodnum[i]);
              });
          } // end of for
        }); // end of then()
      }, // end of initData()
    }, // end of methods

    mounted() {
      this.initData();
    },
  });
</script>
<script></script>
